<template>
  <DialogSubmitForm v-bind="formFrame" ref="form">
    <template #authTree>
      <el-tree
        ref="eltree"
        :data="authData"
        node-key="menuPath"
        :expand-on-click-node="false"
        :props="{ label: 'menuName' }"
        show-checkbox
      />
    </template>
  </DialogSubmitForm>
</template>
<script setup lang="ts">
import { MDialogSubmitForm as DialogSubmitForm } from "page-com";
import { shallowReactive, useTemplateRef, ref } from "vue";
import { updateRole } from "@/api/user/roleApi";
import { DialogSubmitFormFrame } from "page-com";
import { successMsg } from "@/utils/message";
import { accessTree } from "@/utils/tree";
const props = defineProps<{
  authData: ShopTreeMenuVo[];
  leafNode: Set<string>;
}>();
const form = useTemplateRef("form");
const eltree = useTemplateRef("eltree");
const formFrame = shallowReactive<DialogSubmitFormFrame>({
  submitFun: async function (data) {
    data.authPaths = eltree.value
      .getCheckedNodes(false, true)
      .map(v => v.menuPath)
      .join(",");
    let res = await updateRole(data);
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("修改成功");
      emit("saveSuccess", data);
      form.value.hide();
    }
  },
  width: "400px",
  items: [
    {
      frameType: "input",
      label: "角色名",
      key: "roleName",
      validations: {
        required: true
      }
    },
    {
      frameType: "slot",
      label: "权限",
      key: "roleAuths",
      slot: "authTree"
    }
  ]
});
function show(vo: ShopRoleVo) {
  form.value.show({ roleName: vo.name, id: vo.id }, () => {
    eltree.value.setCheckedKeys(
      vo.authPaths.filter(v => props.leafNode.has(v)),
      true
    );
  });
}
defineExpose({ show });
const emit = defineEmits<{
  saveSuccess: [data: ShopUserVo];
}>();
</script>
